<template>
  <div class="modify">
    <div id="matchForm" class="modify-form" >
      <div class="modify-header">
        <h3>编辑比赛</h3>
      </div>
      <div id="title">
        <div class="modify-name">标题：</div>
        <div class="modify-val">
          <input type="text" maxlength="30" v-model="match.title"/>
        </div>
      </div>
      <div id="matchTime">
        <div class="modify-name">时间：</div>
        <div class="modify-val">
          <input name="date" type="date" v-model="date"/>
          <input name="time" type="time" v-model="timeOfDate"/>
        </div>
      </div>
      <div id="leagueName">
        <div class="modify-name">联赛|轮次：</div>
        <div class="modify-val">
          <input name="league" type="text" maxlength="30" v-model="match.league"/>
          <input name="league" type="text" maxlength="30" v-model="match.round"/>
        </div>
      </div>
      <div id="matchStatus">
        <div class="modify-name">状态：</div>
        <ul class="modify-val">
          <li><input type="radio" name="status" value="0" v-model="status"/><span>未赛</span></li>
          <li><input type="radio" name="status" value="1" v-model="status"/><span>进行中</span></li>
          <li><input type="radio" name="status" value="2" v-model="status"/><span>结束</span></li>
        </ul>
      </div>
      <div id="matchType">
        <div class="modify-name">项目：</div>
        <!-- <input name="type" type="text"/> -->
        <ul class="modify-val">
          <li><input type="radio" name="type" value="l" v-model="type"/><span>联赛</span></li>
          <li><input type="radio" name="type" value="m" v-model="type"/><span>男单</span></li>
          <li><input type="radio" name="type" value="w" v-model="type"/><span>女单</span></li>
          <li><input type="radio" name="type" value="mm" v-model="type"/><span>男双</span></li>
          <li><input type="radio" name="type" value="ww" v-model="type"/><span>女双</span></li>
          <li><input type="radio" name="type" value="mw" v-model="type"/><span>混双</span></li>
        </ul>
      </div>
      <div id="player1" v-show="type!=='l'">
        <div class="modify-name">选手1：</div>
        <div class="modify-val">
          <input name="player11" type="text" maxlength="30" v-model="match.player11"/>
          <input name="player12" type="text" maxlength="30" v-model="match.player12" v-show="type.length === 2"/>
        </div>
      </div>
      <div id="player2" v-show="type!=='l'">
        <div class="modify-name">选手2：</div>
        <div class="modify-val">
          <input name="player21" type="text" maxlength="30" v-model="match.player21"/>
          <input name="player22" type="text" maxlength="30" v-model="match.player22" v-show="type.length === 2"/>
        </div>
      </div>
      <div id="score" v-show="type !== 'l' && status != 0">
        <div class="modify-name">总比分：</div>
        <div class="modify-val">
          <input type="text" maxlength="10" v-model="match.score1"/>
          <input type="text" maxlength="10" v-model="match.score2"/>
        </div>
      </div>
      <div id="currentGame" v-show="type !== 'l' && status == 1">
        <div class="modify-name">当前局：</div>
        <ul class="modify-val">
          <li><input type="radio" name="game" value="1" v-model="game"/><span>第一局</span></li>
          <li><input type="radio" name="game" value="2" v-model="game"/><span>第二局</span></li>
          <li><input type="radio" name="game" value="3" v-model="game"/><span>第三局</span></li>
        </ul>
      </div>
      <div id="currentScore" v-show="type !== 'l' && status == 1">
        <div class="modify-name">当前局比分：</div>
        <div class="modify-val">
          <input type="text" maxlength="10" v-model="match.cscore1"/>
          <input type="text" maxlength="10" v-model="match.cscore2"/>
        </div>
      </div>
      <div id="matchLink">
        <div class="modify-name">链接：</div>
        <input name="links" class="hide" value=""/>
        <table class="modify-val">
          <tr>
            <th class="link-name">名称</th>
            <th class="link-title">标题</th>
            <th class="link-url">网址</th>
            <th class="link-btn"></th>
          </tr>
          <tr v-for="item in match.links" class="link-tr">
            <td class="link-name"><input type="text" maxlength="15" :value="item.name"/></td>
            <td class="link-title"><input type="text" maxlength="15" :value="item.title"/></td>
            <td class="link-url"><input type="text" :value="item.url"/></td>
            <td class="link-btn"><button class="delete-link"><span class="glyphicon glyphicon-remove"></span></button></td>
          </tr>
          <tr>
            <td class="link-name"><input type="text" maxlength="15"/></td>
            <td class="link-title"><input type="text" maxlength="15"/></td>
            <td class="link-url"><input type="text"/></td>
            <td class="link-btn"><button @click="add($event)"><span class="glyphicon glyphicon-plus"></span></button></td>
          </tr>
        </table>
      </div>
    </div>
    <div class="modify-operate">
      <input class="submit" type="button" value="完成" @click="submit"/>
      <input type="button" value="取消" @click="cancel"/>
    </div>
    <div class="modify-prompt" v-show="prompt !== null">
      <h3>{{ prompt }}</h3>
    </div>
  </div>
</template>

<style lang="scss">
  @import '../../assets/css/variables.scss';
  #matchLink{
    tr{
      th{
        line-height: 40px; text-align: center; border: 1px solid $border-color;
        &.link-btn{
          width: 0; border: 0;
        }
      }
      td{
        border: 1px solid $border-color; line-height: 40px; height: 40px; text-align: center; color: $hl-color;
        &.link-name{
          width: 30%;
        }
        &.link-url, &.link-title{ 
          width: 35%; 
        }
        &.link-btn{
          width: 0; border: 0;
          button{
            border: 0; background: $bg-color;
          }
        }
        input{
          width: 100%; padding: 0 10px; text-align: center; border: 0;
          &:focus{
            outline: 0;
          }
          &[type=button]{
            line-height: 20px; border: 0; background: $bg-color;
          }
        }
      }
    }
    tr.link-tr td{
      color: #888;
    }
  }
</style>

<script>
  export default {
    name: 'Header',
    components: {},
    props: ['data'],
    data () {
      return {
        prompt: null,//提示
        type: '',
        status: 0,
        game: 0,
      }
    },
    computed: {
      match(){
        let defaults = {
          id: '',
          time: this.getTime(),
          type: 'l',
          player11: '',
          player11Id: '',
          player12: '',
          player12Id: '',
          player21: '',
          player21Id: '',
          player22: '',
          player22Id: '',
          game: 0,
          score1: 0,
          score2: 0,
          cscore1: 0,
          cscore2: 0,
          league: '',
          leagueId: '',
          round: '',
          links: [],
          status: 0,
          title: ''
        };
        return $.extend({}, defaults, this.data);
      },
      
      date: {
        get(){
          let time = this.match.time;
          return time.split('T')[0];
        },
        set(val){
          //var reg = /^\d{4}\-\d{1,2}\-\d{1,2}$/g;
          var date = this.match.time.split('T')[0];
          this.match.time = this.match.time.replace(date, val);
        },
      },
      

      timeOfDate: {
        get(){
          let time = this.match.time || this.getTime();
          return time.split('T')[1];
        },
        set(val){
          var time = this.match.time.split('T')[1];
          this.match.time = this.match.time.replace(time, val);
        }
      },
    },
    methods: {
      //增加链接
      add(evt){
        debugger;
        var $name = $(evt.target).parents('tr').find('.link-name input');
        var $title = $(evt.target).parents('tr').find('.link-title input');
        var $url = $(evt.target).parents('tr').find('.link-url input');
        if($name.val() == ''){
          $name.focus();
        }else if($title.val() == ''){
          $title.focus();
        }else if($url.val() == ''){
          $url.focus();
        }else{
          var name = $name.val();
          var title = $title.val();
          var url = $url.val();
          var $link = '<tr class="link-tr">\
            <td class="link-name">\
              <input type="text" value="' + name + '"/>\
            </td>\
            <td class="link-title">\
              <input type="text" value="' + title + '"/>\
            </td>\
            <td class="link-url">\
              <input type="text" value="' + url + '"/>\
            </td>\
            <td class="link-btn">\
                <button class="delete-link"><span class="glyphicon glyphicon-remove"></span></button>\
            </td>\
          </tr>';
          $(evt.target).parents('tr').before($link);
          $(evt.target).parents('tr').find('.link-name input, .link-title input, .link-url input').val('');
        }
      },

      //完成
      submit(){
        debugger;
        let self = this;
        
        let 
          type = self.type,
          time = commons.getFullTime(self.match.time.replace("T", " ")),
          links = [],
          status = self.status;

        //检查输入内容
        let inputName = '';
        if(type.length === 1 && type !== 'l' && (self.match.player11 === '' || self.match.player21 === '')){
          self.prompt = '选手不可为空';
          inputName = self.match.player11==='' ? 'player11' : 'player21';
        }else if(type.length === 2 && (self.match.player11 === '' || self.match.player12 === '' 
          || self.match.player21 === '' || self.match.player22 === '')){
          self.prompt = '选手不可为空';
          inputName = self.match.player11==='' ? 'player11' : 
            (self.match.player12==='' ? 'player12' : (self.match.player21==='' ? 'player21' : 'player22'));
        }else if(self.match.league === ''){
          self.prompt = '联赛不能为空';
          inputName = 'league';
        }

        if(self.prompt !== null){
          setTimeout(function(){
            self.prompt = null;
            $('#matchForm input[name=' + inputName + ']').focus();
          }, 1500);
          return;
        }

        //链接
        $('#matchLink .link-tr').each(function(index, ele){
          let name = $(ele).find('.link-name input').val();
          let title = $(ele).find('.link-title input').val();
          let url = $(ele).find('.link-url input').val();
          links.push(name + ',' + title + ',' + url);
        });
        
        let url = self.data ? '/start/admin/match/update' : '/start/admin/match/add';
        $.ajax({
          url: url,
          type: 'POST',
          data: {
            'id': self.match.id,
            'time': time,
            'player11': self.match.player11,
            'player11Id': self.match.player11Id,
            'player12': self.match.player12,
            'player12Id': self.match.player12Id,
            'player21': self.match.player21,
            'player21Id': self.match.player21Id,
            'player22': self.match.player22,
            'player22Id': self.match.player22Id,
            'game': self.match.game,
            'score1': self.match.score1,
            'score2': self.match.score2,
            'cscore1': self.match.cscore1,
            'cscore2': self.match.cscore2,
            'league': self.match.league,
            'leagueId': self.match.leagueid,
            'round': self.match.round,
            'type': type,
            'links': links.join(';'),
            'status': status,
            'title': self.match.title
          },
          success(result){
            self.prompt = '提交成功';
            setTimeout(function(){
              self.close();
            }, 1000);
          },
          error(result){
            self.prompt = '提交失败';
          }
        });
      },

      //关闭
      close(){
        this.prompt = null;
        this.$emit('close', true);
      },

      //取消
      cancel(){
        this.prompt = null;
        this.$emit('close');
      },

      getTime(d){
        debugger;
        d = d || new Date().getTime();
        return commons.getTimeNumToStr(d, 'yyyy-MM-dd') + 'T00:00';
      }
    },

    mounted(){
      debugger;
      this.type = this.match.type ? this.match.type : '';
      this.status = this.match.status ? this.match.status : 0;
      this.game = this.match.game ? this.match.game : 0;

      //删除链接
      $('#matchLink').off().on('click', '.delete-link', function(evt){
        $(evt.target).parents('tr').remove();
      });
    }
  }
</script>
